<template>
  <div>
    <el-card>
      <!--头部区域-->
      <el-row :gutter="20" type="flex">
        <el-col>
          <el-form :inline="true" ref="searchFrom" :model="topForm">
            <el-form-item label="视频名称：" prop="video_title">
              <el-input v-model="topForm.video_title" placeholder="" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="videoInfo()" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="topFormClear()" size="small">重置</el-button>
            </el-form-item>
            <el-form-item>
              <el-button type="success" @click="dialogVisible=true;" size="small">新增</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <!--数据展示表格-->
      <el-table
        :data="tableData"
        border
        max-height="500px"
        style="width: 100%">
        <el-table-column
          label="#"
          type="index"
          width="50px"
          align="center">
        </el-table-column>
        <el-table-column
          prop="video_title"
          label="视频名称">
        </el-table-column>
        <el-table-column
          prop="video_img"
          label="视频封面">
          <template slot-scope="scope">
            <div>
              <el-popover placement="right" trigger="hover">
                <el-image
                  style="height: 300px"
                  :src="scope.row.video_img"
                  :fit="contain">
                </el-image>
                <el-image
                  slot="reference"
                  style="width:100px ;height: 100px"
                  :src="scope.row.video_img"
                  :fit="contain">
                </el-image>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="video_path"
          label="视频路径"
          width="180">
        </el-table-column>
        <el-table-column
          prop="caozuo"
          label="操作">
          <template slot-scope="scope">
            <!-- 删除按钮 -->
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeVideoById(scope.row.id)"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--翻页和条数切换-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      <!--新增/编辑表单-->
      <div>
        <el-dialog
          @close="dialogFormClear"
          :visible.sync="dialogVisible"
          width="50%"
          >
          <div slot="title" class="dialog-title" >
            <span>新增</span>
          </div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="视频名称">
              <el-input v-model="form.video_title"></el-input>
            </el-form-item>
            <el-form-item label="视频封面">
              <Upload ref="upload"
              @imgChange="getImgPath"
              :fp="form.video_img"
              />
            </el-form-item>
            <el-form-item label="视频上传">
              <VideoUpload ref="videoupload"
              @videoChange="getVideoPath"
              :fp="form.video_path"
              />
            </el-form-item>
            <el-form-item>
              <el-button @click="dialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible = false;addOrEditForm()">确 定</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
  import {Form} from "element-ui";
  import Upload from "../../components/Upload.vue";
  import VideoUpload from "../../components/VideoUpload.vue";

  export default {
    components: {VideoUpload, Upload},
    data() {
      return {
        // <!--底部翻页数据内容-->
        tableData: [],
        allData: [],
        current: 1,
        total: 0,
        size: 10,
        // <!--顶部搜索栏输入内容-->
        topForm: {
          video_title: '',
        },
        dialogVisible: false,
        dialogTitle: '',
        //dialog新增编辑表单
        form: {
          id: '',
          video_title: '',
          video_img: '',
          video_path: '',
        },
        // 默认dialog空表单，提供关闭回调
        defaultForm: {
          id: '',
          video_title: '',
          video_img: '',
          video_path: '',
        },
      };
    },
    mounted: function () {
      this.videoInfo()
    },
    methods: {
      //删除视频功能
      removeVideoById(id) {
        this.$confirm('确定要删除该视频吗', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios.delete('api/video/del', {
            params: {id: id},
          }).then((res) => {
            if (res.data['respCode'] === '000000') {
              this.$message({message: '删除成功', type: 'success'});
              this.videoInfo()
            } else {
              this.$message.error(res.data['respMsg'])
            }
          });
        })
          .catch(() => {
            this.$message({type: "info", message: '已取消删除'})
          })
      },
      //获取后端response中的文件路径，upload路由通信，见Upload组件
      getImgPath(filepath) {
        this.form.video_img = filepath
      },
      getVideoPath(filepath) {
        this.form.video_path = filepath
      },
      //dialog关闭回调重置dialog表单数据
      dialogFormClear() {
        this.form = Object.assign({}, this.defaultForm)
      },
      //重置按钮操作
      topFormClear() {
        this.$refs.searchFrom.resetFields()
      },
      //新增和编辑操作
      addOrEditForm() {
        // 新增表单
        this.$axios.get('api/video/add/', {
          params: {
            video_title: this.form.video_title, video_path: this.form.video_path, video_img: this.form.video_img,
          }
        }).then((response) => {
          var res = response.data
          if (res['respCode'] === '000000') {
            this.videoInfo()
            this.$message.success('新增成功')
          } else {
            this.$message.error('新增失败')
            console.log(res['respMsg'])
          }
        })
      },
    // <!--展示后端数据列表-->
    //查询按钮操作
    videoInfo() {
      this.$axios.get('api/video/info/', {
        params: {video_title: this.topForm.video_title}
      }).then((response) => {
        var res = response.data
        if (res['respCode'] === '000000') {
          this.allDate = res['list']
          // <!--slice切片展示当页数据-->
          this.tableData = this.allDate.slice(
            (this.current - 1) * this.size,
            this.current * this.size
          );
          this.total = this.allDate.length
          console.log(res['list'])
        } else {
          console.log(res['respMsg'])
        }
      })
    },
    //页面条数切换钩子
    handleSizeChange(val) {
      this.size = val
      this.current = 1
      this.courseInfo()
      console.log(`每页 ${val} 条`);
    },
    //页码切换的钩子
    handleCurrentChange(val) {
      this.current = val
      this.courseInfo()
      console.log(`当前页: ${val}`);
    }
    },
  }
</script>

<style scoped>
.el-pagination {
  float: right;
  padding: 10px;
}
</style>
